<template>
	<div class="multi" @mouseleave="leave">
    <p class="show-select-name" @click="dropDownUl()" :title="displayData">
      <span v-if="!selectedList.length">{{initialization}}</span>
      <span v-for="item in selectedList">{{item[displayname]}}&nbsp;&nbsp;</span>
      <i class="fa fa-caret-down"  v-if="!showAllOption"></i>
      <i class="fa fa-caret-up"  v-if="showAllOption"></i>
	  </p>
		<div class="all-option">
		  <ul>
	    	<li v-for="item in originOptions" @click="multipleSelect(item)" v-bind:class="{active:selectedIdList.indexOf(item.id)>-1}">
	        <span>{{item[displayname]}}</span>
	      </li>
		  </ul>
		</div>
	</div>
</template>
<script>
	export default {
	  name:'multi',
	  props: ['optionsdata','selecteddata',"dataindex","displayname","initialization"],
	  data:function () {
      return{
        /**原始数组**/
        originOptions: [],
        /**选中的数组**/
        selectedList: [],
        /**选中数组id**/
        selectedIdList : [],
        /**选中数组id转字符串**/
        selectedIdString:"",
        /**展示内容**/
        displayData:'',
        /**下拉框隐藏**/
        showAllOption:false,
        /**是否有全选**/
        isChoose:false,
      }
    },
    created:function() {
      this.init();
    },
    watch: {
      optionsdata: function (val, oldVal) {
        this.originOptions = val;
      },
      selecteddata: function(val, oldVal){
        this.selectedList = val;
        this.selectedIdList=[];
        this.displayData='';
        // 赋值selectedList
        for (var i=0;i<this.selectedList.length;i++){
          this.selectedIdList.push(this.selectedList[i].id);
          this.displayData+=this.selectedList[i][this.displayname]+' '+' ';
        }
      }
    },
    methods: {
		  /**给条数据加个index初始值**/
      init:function(){
        for(var i=0;i<this.optionsdata.length;i++){
          this.originOptions.push(this.optionsdata[i]);
        }
        for(var i=0;i<this.selecteddata.length;i++){
          this.selectedIdList.push(this.selecteddata[i].id);
					this.selectedList.push(this.selecteddata[i]);
          this.displayData+=this.selecteddata[i][this.displayname]+' '+' ';
        }
      },
      /**选中**/
      multipleSelect: function(item){
				//若selectedIdList存在 则删除
        for(var i=0;i<this.selectedIdList.length;i++){
          if (this.selectedIdList[i]==item.id){
            this.multipleRemove(item);
            return;
          }
        }
        this.selectedList.push(item);
        this.selectedIdList.push(item.id);
        this.displayData+=item[this.displayname]+' '+' ';
				this.$emit('item',this.selectedList);
    	},
      /**移除**/
      multipleRemove: function(item){
        for (var i=0;i<this.selectedList.length;i++){
          if (item.id == this.selectedList[i].id){
            //1.从selectedList中删除 2.从selectedIdList中删除
            this.selectedList.splice(i,1);
            this.selectedIdList.splice(i,1)
            this.$emit('item',this.selectedList);
            this.displayNameFn();
            return;
          }
        }
      },
      displayNameFn:function(){
        this.displayData="";
        for (var i=0;i<this.selectedList.length;i++) {
          this.displayData+=this.selectedList[i][this.displayname]+' '+' ';
        }
      },
      /**显示下拉框**/
      dropDownUl:function(){
        this.showAllOption=true;
        if(this.dataindex){
        	$(".multi:nth-child("+this.dataindex+") .all-option").css("display","block");
        }else{
        	$(".all-option").css("display","block");
        }
				
      },
      /**离开时，下拉框收起**/
      leave:function () {
        this.showAllOption=false;
        $(".all-option").css("display","none");
      }
    }
  }
</script>